/**
 * 首页
 */

import { Carousel } from 'antd';
import './index.scss';
import { useEffect, useState, useRef } from 'react';
import { Banner, head } from '../../api/home'
import Main from '../../layouts/Home'
import { NavLink,useLocation } from 'react-router-dom';
import { topCateHory } from '../../utils/const'
import store from '../../store/rabbit'
import ProductCard from '../../components/Card'
import { RightOutlined, LeftOutlined } from '@ant-design/icons'
import Skeleton from '../../components/Skeleton'
import New from '../../components/New';
import Hot from '../../components/Hot'
import Brand from '../../components/Brand'
import Home from '../../components/Home'
import Subject from '../../components/Subject';

export default (props) => {
    const location = useLocation()
    const ruleId = location.search ? location.search.split("=")[1] : "";
    /**
     * 引用
     * **/
    const curRef = useRef()
    /**
     * 存放轮播图数据
     * **/
    const [banner, setBanner] = useState([])
    /**
     * 控制显示左右箭头
     * **/
    const [show, setShow] = useState(false)
    /**
     * 轮播图原点
     * **/
    const [activeIndex, setActiveIndex] = useState(0)
    /**
     * 导航数据
     * **/
    const [list, setList] = useState([])
    /**
     * 获取导航数据
     * **/
    const getNav = async () => {
        try {
            const data = await head()
            setList(data)
        } catch (error) { }
    }
    /**
     * 获取轮播图
     * **/
    const getBanner = async () => {
        try {
            const data = await Banner()
            setBanner(data)
        } catch (error) {
        }
    }
    useEffect(() => {
        getBanner()
        getNav()
    }, [])

    /**
     * 页面
     */
    return (
        <Main>
            <div className="w">
                <div className="homePage">

                    <div className="left-box">
                        {list.map((item, index) => <p key={item.id}><NavLink to={"/category/" + item.id}>{item.name}</NavLink>
                            {item.children && item.children.slice(0, 2).map(child => (
                                <NavLink key={child.id} to={"/category/sub?id=" + child.id}>{child.name}</NavLink>
                            ))}
                            {/* 子菜单 */}
                            <div className='right-box'>
                                <h2>&emsp;分类推荐<span>根据您的购买或浏览记录推荐</span></h2>
                                <div className='goods'>
                                    {
                                        item.goods && item.goods.map(product => (
                                            <ProductCard key={product.id} product={product}></ProductCard>
                                        ))
                                    }
                                </div>
                            </div>
                        </p>)}
                        <p><NavLink to={"category/brand"}>品牌</NavLink><NavLink to={"category/sub/brand-children"}>品牌推荐</NavLink></p>
                    </div>
                    {banner.length ? <Carousel ref={curRef} autoplay dots={false} effect="fade" beforeChange={(from, to) => setActiveIndex(to)}>
                        {banner.map((item, index) => (
                            <NavLink onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} key={item.id} to={item.hrefUrl}>
                                <img src={item.imgUrl} alt="" />
                            </NavLink>
                        ))}
                    </Carousel> : <Skeleton type={2} ></Skeleton>
                    }
                    <div onClick={() => curRef.current.prev()} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} className={['arrow arrowLeft', show ? 'show' : ''].join(' ')}><LeftOutlined /></div>
                    <div onClick={() => curRef.current.next()} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)} className={['arrow arrowRight', show ? 'show' : ''].join(' ')}><RightOutlined /></div>
                    <ul className='dots'>
                        {
                            banner.map((item, index) => (
                                <li key={index} onClick={() => curRef.current.goTo(index)} className={index == activeIndex ? 'active' : ''}></li>
                            ))
                        }

                    </ul>
                </div>
                {/* 新鲜好物 */}
                <New></New>
                {/* 人气推荐 */}
                <Hot></Hot>
                {/* 热门品牌*/}
                <Brand></Brand>
                {/* 居家 */}
                <Home></Home>
                {/* 最新专题 */}
                <Subject></Subject>
            </div>
        </Main>
    )


}

